<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>组织架构</title>
<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
<link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all"/>
<link rel="stylesheet" th:href="@{/static/css/popCss.css}" media="all"/>
<link rel="stylesheet" th:href="@{/static/org/css/org.css}" media="all"/>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<style type="text/css">
	/*取消选中效果*/
	div{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
      user-select:none;
	}
	mt1_4per{margin-top: 1.4%;}
	pointer{cursor: pointer}
</style>
</head>
<body>
<div class="right-Sidebar-con">
	<div class="bgWhite box-shadows1 border-radius4 scroll-box">
		<div class="scroll-box-con scroll-box-con-bot border-radius4 bgWhite">
			<div class="tree-organ">
				<div class="mb20px lh32px overflow add-btn-input">
					<p class="left cursor">
						<span onclick="addOrg()" class="white border-radius4 bgGreen inline-block pl15px pr15px pointer"><img th:src="@{/static/img/button_add.png}" class="mr5px" style="vertical-align: -1px;">新建</span>
					</p>
				</div>
				<div class="tree-organ-con border-radius4">
					<ul class="tree-item-title fb">
						<li><span>组织名称</span></li>
						<li><span>组织类型</span></li>
						<li><span style="margin-left: 25%;">地址</span></li>
						<li><span style="margin-left: 30%;">操作</span></li>
					</ul>
					<div style="overflow: hidden !important;">
					<div class="tree-con-box tree-con-box-scroll">
						<ul class="tree-one" id="treeOneList">
							<li th:each="lv1:${orgListlv1}">
								<div class="tree-children">
									<div>
										<p th:if="${lv1.is_child_exist}==1" th:attr="data-level=${lv1.org_level},data-id=${lv1.org_id}, data-click=0"  onclick="getListData(this)" class="tree-arrow cursor"><img th:src="@{/static/org/img/icon_up.png}"></p>
										<p th:text="${lv1.org_name}"></p>
									</div>
									<div>
										<p th:text="${lv1.type}"></p>
									</div>
									<div>
										<p class="cursor tree-hide" th:text="${lv1.org_address}"></p>
										<div class="layui-tips-main hidden">
											<div th:text="${lv1.org_address}"></div>
											<i class="layui-icon-close"></i>
										</div>
									</div>
									<div style="margin-right: 20px;"><span th:onclick="editOrg('[[${lv1.org_id}]]')" style="cursor:pointer" class="green">编辑</span>|<span class="green" style="cursor:pointer" th:onclick="delOrg('[[${lv1.org_id}]]')" >删除</span>|<span class="green" style="cursor:pointer" th:attr="data-name=${lv1.org_name},data-qrcode=${lv1.qr_code},data-type=${lv1.type},data-filename=${lv1.file_name}" th:onclick="qrcodeCon(this)">二维码</span></div>
								</div>
							</li>
						</ul>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="pop-delete-con-confirm" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<ul>
				<li style="font-size: 17px;font-weight: bold;"><img th:src="@{/static/img/tc_icon_xz.png}">是否要删除此数据？</li>
				<li class="f14px mt15px">删除后将无法恢复，请确认是否要删除这条数据</li>
			</ul>
			<div class="btn-con textRight pt15px cursor">
				<div class="inline-block textCenter overflow">
					<p class="confirm-cancel mr20px close-btn">取    消</p>
					<p class="confirm-con">确    定(5)</p>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="pop-ret-con-fail" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<dl class="textCenter">
				<dt><img th:src="@{/static/img/tc_icon_sb.png}"></dt>
				<dd id="pop-ret-con-fail-title" class="pt20px pb20px f18px fb">删除失败</dd>
				<dd id="pop-ret-con-fail-msg" class="red">此组织有下级组织，不能删除该数据</dd>
			</dl>
		</div>
	</div>
</div>

<div id="pop-ret-con-succ" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<dl class="textCenter">
				<dt><img th:src="@{/static/img/tc_icon_cg.png}"></dt>
				<dd id="pop-ret-con-succ-msg" class="pt20px f18px fb">删除成功</dd>
			</dl>
		</div>
	</div>
</div>

<input id="interval-exist" type="hidden"  value="1"/>


<script th:src="@{/static/js/jquery-2.1.3.min.js}"></script>
<!--组织架构-->
<script type="text/javascript" th:src="@{/static/js/layuiCon.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>

<script>
	//layer初始化
	var layer;
	layui.use('layer', function(){
		layer = layui.layer;
	});

	$(function(){
		$('.tree-one ul').hide();
		//列表组织弹层初始化
		doListOrganCon();
	})

	/**
	 * 获取列表数据
	 */
	function getListData(obj){
		//收起地址详细显示
		$('.layui-tips-main').fadeOut();

		//已点击展开过的机构不再拉取下属机构数据
		var level = $(obj).data("level");
		var click =$(obj).data("click");
		if(click==1){
			return;
		}
		//五级机构禁止点击
		level= parseInt(level)+parseInt(1);
		if(level>=6){
			return;
		}
		var OrgId = $(obj).data("id");
		$.ajax({
			type:"post",
			url:basePath+"/org/getListData",
			dataType:"json",
			data:{"orgLevel":level,"parentOrgId":OrgId},
			success:function(data){
				if(data.code==200){
					var str="";
					if(level==2){
						str+='<ul class="tree-two">';
					}else if(level==3){
						str+='<ul class="tree-three">';
					}else if(level==4){
						str+='<ul class="tree-four">';
					}else if(level==5){
						str+='<ul class="tree-five">';
					}
					$.each(data.data,function(index,obj){
						var count=obj.count;
						if(data.data.length>0){
							str+='<li data-parentid="'+obj.parent_org_id+'">';
							str+='<div class="tree-children">';
							if(count>0){
								str+='<div><p  id="org'+obj.org_id+'"  data-click="0" data-level="'+obj.org_level+'" data-id="'+obj.org_id+'"  onclick="getListData(this)" class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_up.png"></p><p>'+obj.org_name+'</p></div>';
							}else{
								str+='<div><p class="tree-arrow cursor"><img></p><p>'+obj.org_name+'</p></div>';
							}
							str+='<div><p>'+obj.type+'</p></div>';
							str+='<div><p class="cursor tree-hide">'+obj.org_address+'</p><div class="layui-tips-main hidden"><div>'+obj.org_address+'</div><i class="layui-icon-close"></i></div></div>';
							str+='<div style="margin-right: 20px;"><span onclick="editOrg('+obj.org_id+')" style="cursor:pointer" class="green">编辑</span>|<span onclick="delOrg('+obj.org_id+')" style="cursor:pointer" class="green">删除</span>|<span class="green" style="cursor:pointer" data-name="'+obj.org_name+'" data-qrcode="'+obj.qr_code+'" data-type="'+obj.type+'" data-filename="'+obj.file_name+'" onclick="qrcodeCon(this)">二维码</span></div>';
							str+='</div>';
							str+='</li>';
							$("#inputId").append('<input id="reg'+obj.org_id+'" type="hidden"/>');
						}
					});
					str+='</ul>';
					$(obj).data("click","1");
					$(obj).parent().parent().parent().append(str);
					//列表组织弹层初始化
					doListOrganCon();
				}

			}
		})
	}

	/**
	 * 列表组织弹层初始化
	 */
	function doListOrganCon(){
		$('.tree-one div.tree-children div p.tree-arrow').unbind().click(function() {
			$(this).parent().parents('div.tree-children').nextAll('ul').slideToggle(300);
			if ($(this).find('img').attr('src') == basePath+'/static/org/img/icon_up.png') {
				$(this).find('img').attr('src', basePath+'/static/org/img/icon_down.png');
				$(this).parent().siblings().find('img').attr('src', basePath+'/static/org/img/icon_up.png')
			} else if($(this).find('img').attr('src') == basePath+'/static/org/img/icon_down.png'){
				$(this).find('img').attr('src', basePath+'/static/org/img/icon_up.png')
			}
		})

		$('.tree-hide').unbind().click(function(){
			$('.layui-tips-main').fadeOut();
			$(this).parent().find('.layui-tips-main').fadeIn();
		})
		$('.layui-icon-close').unbind().click(function() {
			$(this).parent().fadeOut();
		})
	}


	/**
	 * 添加选择机构-机构
	 */
	function addOrgSelect(obj){
		var name = $(obj).html();
		var orgId = $(obj).data("orgid");
		$("#selectParentOrg").html(name);
		$("#selectParentOrg").data("orgid",orgId);
		$('.add-has-one ul').hide();
		$('.tree-con-box').slideUp(500);
	}

	/**
	 * 判断是否空
	 */
	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}

	/**
	 * 跳转到添加机构
	 */
	function addOrg(){
		window.location.href=basePath+"/org/addPage";
	}

	/**
	 * 跳转到修改机构
	 */
	function editOrg(orgId){
		window.location.href=basePath+"/org/editPage?orgId="+orgId;
	}

	/**
	 * 删除机构
	 */
	function delOrg(orgId){
		var args=[];
		args.push(orgId);
		deleteCon("",deleteCommit, args);
	}

	/**
	 * 删除机构提交
	 */
	function deleteCommit(orgId){
		$.ajax({
			type:"post",
			url:basePath+"/org/delOrg",
			dataType:"json",
			async: false,
			data:{"orgId":orgId},
			success:function(data){
				if(data.code==200){
					layer.msg("删除成功", {icon: 1, time:1500},
						function(){
							window.location.href=basePath+"/org/listPage";
						}
					);
				}else if(data.code==201){
					layer.msg(data.msg, {icon: 2, time:1500});
				}
			}
		})
	}

	/**
	 * 二维码弹窗
	 */
	function qrcodeCon(obj){
		var orgname = $(obj).data("name");
		var qrcode = $(obj).data("qrcode");
		var type = $(obj).data("type");
		var filename = $(obj).data("filename");
		console.log("filename="+filename);
		var html='';
		html+='<div id="pop-con">';
		html+='<div class="pop-up">';
		html+='<div class="code-con">';
		html+='<div class="pop-title relative overflow mb15px"><span class="ml15px">二维码</span><p class="right"><img src="'+basePath+'/static/org/img/close_icon.png" class="block pop-close"><p></div>';
		html+='<dl class="textCenter mt20px mb40px">';
		html+='<dt><img src="'+qrcode+'"></dt>';
		html+='<dd class="gray mt10px">'+orgname+type+'</dd>';
		html+='</dl>';
		html+='<div class="btn-con textCenter">';
		html+='<span class="btn-one" style="cursor: pointer;">取&nbsp;消</span>';
		html+='<span class="btn-two" style="cursor: pointer;" onclick="qrdownload(\''+filename+'\')">下&nbsp;载</span>';
		html+='</div>';
		html+='</div>';
		html+='</div>';
		html+='</div>';

		layui.use(['element', 'layer'], function() {
			var element = layui.element;
			var layer = layui.layer;
			var indexview=layer.open({
				type: 1
				,title: false //不显示标题栏
				,closeBtn: false
				//新建组织
				,area: ['','']
				,shade: 0.6
				,id: 'qrcode' //设定一个id，防止重复弹出
				/*,btn: ['确认支付']*/
				,btnAlign: 'c'
				,moveType: 1 //拖拽模式，0或者1
				,shadeClose: true //设置允许点遮罩关闭
				,content: html,
				success:function(){
					$(".btn-one").unbind().click(function () {
						layer.close(indexview);
					})
					$(".btn-cancel-all").unbind().click(function() {
						layer.closeAll();
					});
					$(".btn-two").unbind().click(function () {
						layer.closeAll();
					})
					$(".pop-close").unbind().click(function () {
						layer.closeAll();
					})
				},
			});
		});
	}

	/**
	 * 下载二维码
	 */
	function qrdownload(fileName){
		console.log("fileName="+fileName);
		window.location.href=basePath+"/org/qrdownload?fileName="+fileName;
	}
</script>
</body>
</html>
    
 